<!-- Copyright 2011 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html>
<html>
  <head>
    <title>Strike on the 3vil 3mpire!</title>

    <link href="./css/sotee.css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="./scripts/yepnope.1.5.3-min.js"></script>
    	
    <script async>
		// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
		window.requestAnimFrame = (function () {
        	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        	function ( /* function */ callback, /* DOMElement */ element) {
          		window.setTimeout(callback, 1000 / 60);
        	};
      	})();      	
    </script>

	<script>
		var $doc = function (selector) {
			return selector.charAt(0) == '#' ? document.getElementById(selector.substr(1)) : document.getElementsByTagName(selector);
		};
		var $new = function (name) {
			return document.createElement(name);
		};
		
				
		// timer function to wait for a given condition, then run the result function
		function checkWait(conditionFunction, resultFunction) {
			var tev = setInterval(function() {
				if(conditionFunction()) {
					resultFunction(); 
					clearInterval(tev)
				}
			}, 1000);
		}
		
		distSq = function(p1,p2) {
  			return (p1.x-p2.x)*(p1.x-p2.x) + (p1.y-p2.y)*(p1.y-p2.y);
  		};

		alphaBeta = function(x1,x2,alpha) {
  			return x1*alpha + x2*(1.0 - alpha);
  		};
	</script>		
    <!-- AUTH / LOGIN -->
	<script type="text/javascript" src="./scripts/pregame/oauthlogin.js"></script>
	<script type="text/javascript" src="./scripts/pregame/xhr.js"></script>
	<script type="text/javascript" src="./scripts/pregame/assetloader.js"></script>
	<script type="text/javascript" src="../shared/core/core.js"></script>
	<script type="text/javascript" src="../shared/core/Logger.js"></script>
	<script type="text/javascript" src="./scripts/pregame/menus.js"></script>
	<script type="text/javascript" src="./scripts/core/soundManager.js"></script>
	
    <script type="text/javascript">
      IS_CLIENT = true;
      IS_SERVER = true; // ^^^^ lets pretend we're SERVER as well
      var document_onload = function () {
        gSM.init();
        constructSpaceMap();
        show_this_only(["welcomescreen"]);
      };
      var spaceMapHTML = "";
      var randRange = function (n) {
      	return Math.floor(Math.random()*n);
      };
      var animFrameRunning = false;

      var constructSpaceMap = function() {
      	var planetS = "./img/if_planet0";
      	for (var i=0;i<20;i++) {
      		var planetHTML = "<div class='welcome_space_map_planet' ";
      		var rad = randRange(36)*10;
      		var dist = randRange(3)*120+randRange(40)+40;
      		var variant = 1+randRange(3);
      		var x = Math.floor(320+Math.sin((rad-60)/180*Math.PI)*dist);
      		var y = Math.floor(320+Math.cos((rad-60)/180*Math.PI)*dist);
      		planetHTML += 'style="-webkit-transform: rotateZ('+rad+'deg); top: '+x+'px; left:'+y+'px; background-image: url(\''+planetS+''+variant+'.png\');"><div style="position:absolute; left:42px;">Name: unknown<br>State: amber<br>Strikes: '+randRange(300)+'</div></div>';
      		spaceMapHTML += planetHTML;
      	};
      	$doc('#welcome_space_map').innerHTML=spaceMapHTML;
      };
     
      
      var loadGame = function (gameURL, player_game_key, map) {

      	  show_loading();
		
          var inputScripts = [
            // Shared scripts
			"../shared/core/core.js",
            "../shared/core/box2D.js",
            "../shared/core/Constants.js",
            "../shared/core/Factory.js",
            "../shared/core/Timer.js",
            "../shared/core/Entity.js",
            "../shared/core/GameEngine.js",
            "../shared/core/PhysicsEngine.js",
            "../shared/core/Level.js",
            "../shared/core/Player.js",
            "../shared/core/TileMap.js",
            "../shared/core/Weapon.js",
            "../shared/core/WeaponInstance.js",
            "../shared/entities/ScrollPoint.js",
            "../shared/entities/Asteroid.js",
            "../shared/entities/Enemy.js",
            "../shared/entities/Projectiles.js",
            "../shared/entities/Loot.js",
            "../shared/entities/Bosses.js",
            "../shared/core/Logger.js",
            "../shared/core/Util.js",
            
            // Client-side scripts
            "./scripts/core/ClientGameEngine.js",
            "./scripts/core/ClientPlayer.js",
            "./scripts/core/InputEngine.js",
            "./scripts/core/RenderEngine.js",
            "./scripts/core/SpriteSheet.js",
            "./scripts/effects/InstancedEffect.js",
            "./scripts/gui/PowerSlot.js",
            "./scripts/gui/GuiEngine.js",
			"../shared/core/loop.js"
		];
		Logger.log ("Loading shared and client scripts");
		yepnope({
            load: inputScripts,
            complete: function() {
            	Logger.log("loaded scripts");
				Logger.log ("Script loading complete, preloading assets");
				gGameEngine.preloadAssets([map]); // only preload initial map assets
				checkWait(
					function()
					{
						return gGameEngine.preloadComplete;
					},
					function () 
					{
						gameLoadComplete(gameURL, player_game_key, map);
					}
				); // preloadGameAssets(gameURL, player_game_key, map)
			}
         });
        }; // loadGame

        function preloadGameAssets(gameURL, player_game_key, map) {
        	Logger.log("loaded scripts");
			Logger.log ("Script loading complete, preloading assets");
			gGameEngine.preloadAssets([map]); // only preload initial map assets
			checkWait(
				function()
				{
					return gGameEngine.preloadComplete;
				},
				function () 
				{
					gameLoadComplete(gameURL, player_game_key, map);
				}
			);
		};


        function reloadGame(gameURL, player_game_key, map) {
        	// Z: called from mission_end dialogue
        	gGameEngine.removeAllEntities();
        	//gLevel = new LevelClass();
        	//gRenderEngine = new RenderEngineClass();
        	preloadGameAssets(gameURL, player_game_key, map);

        }
        
		function readyToRock() {

            Logger.log("Ready to rock");
            
            var p0 = gGameEngine.spawnPlayer(1, 1, 'scrollpoint' , 'Player', 1, 'my ship');
			p0.toOthers = p0.toAll = p0;
			p0.color = 1;
			gGameEngine.gPlayer0 = p0;

            //kick off our animation
            if (!animFrameRunning) {
            	requestAnimFrame(run);
            	animFrameRunning = true;
            };
        }
		  
		function gameLoadComplete(gameURL, player_game_key, map)
		{
            Logger.log("loaded game assets");
            show_this_only(["game_canvas"])	  
			gInputEngine.setup();
			gRenderEngine.setup();
			gGameEngine.setup(); // maybe split preload and setup here too, setup expecting map and script to be loaded.
			gLevel.setup(map);
			Logger.log("setup engines");
			checkWait (gLevel.ready, readyToRock);
		}
	
      //-----------------------------------------
      var run = function () {
          //check for resizes and adjust accordingly.
          /*if (gRenderEngine.canvas.width != window.innerWidth) {
            gRenderEngine.canvas.width = window.innerWidth;
          }
          if (gRenderEngine.canvas.height != window.innerHeight) {
            gRenderEngine.canvas.height = window.innerHeight;
          }
		  */
          
		  gRenderEngine.context.clearRect ( 0 , 0 , gRenderEngine.canvas.width, gRenderEngine.canvas.height );
		  gGameEngine.run();
          requestAnimFrame(run);


        };
      //-----------------------------------------

      //do not touch this.
      document.addEventListener('DOMContentLoaded', document_onload, false);
	  
    </script>

  </head>

	
  <body id="mainbody">
  	<!--//<img src="./img/icon_lrg.png" style="display:none;position:absolute;top:0;left:0;"> -->
    <div id="sorrybody" style="display:none">
  	  Sorry, this page is optimized for Desktop versions of Chrome.
	</div>


    <div id="bodycontent">
    	<!-- OPENER (TITLE, LOGIN, QUICK GAME) -->
		<div id="welcomescreen" style="position:absolute; top:0; width:800px; left:50px; height:900px;">
			<div id="title">
				<div id="title_section1"></div>
				<div id="title_section2"></div>
				<div id="title_section3"></div>
				<div id="title_section4"></div>
				<div id="title_section5"></div>
			</div>
			<div id="welcome_space_table" style="position:absolute; top:180; left:200px;">
				<div id='welcome_space_map'></div>
			</div>
			<div style="height:0px; width:600px"></div>

			<div id="welcome_buttons">
				<ul class="buttonbar">
	        		<li>
	          			<button class="if" onCLick='loadGame ("","", "planet1");'>Launch</button>
	        		</li>
	        		<li>
	          			<button class="if" onCLick='playSoundInstance("./sound/menu_select.ogg");dologin()'>Login</button>
	        		</li>
				</ul>
			</div>
		</div>

		<!-- MISSION SELECT -->
		<div id="game_missions">
			<div id="game_campaign_status"></div>
			<div id='space_map'></div>
		</div>

		<!-- PILOT SELECT -->
		<div id="game_pilots">
		</div>

		<!-- SHIP & LOADOUT SELECT -->
		<div id="game_hangar">
		</div>
		<!-- GAME CANVAS -->
		<div id='game_canvas'>
			<canvas id='canvas' width="1000" height="600"></canvas>
			<div id='canvasui' name='canvasui'>
				<div id='msgbox'>&nbsp;</div>
				<div id='playerstatus'>
					<div id='gui-powerSlots'>
						<div class='gui-powerSlot' id='gui-powerSlot_1'>--</div>
						<div class='gui-powerSlot' id='gui-powerSlot_2'>--</div>
						<div class='gui-powerSlot' id='gui-powerSlot_3'>--</div>
						<div class='gui-powerSlot' id='gui-powerSlot_4'>--</div>
						<div class='gui-powerSlot' id='gui-powerSlot_5'>--</div>
						<div class='gui-powerSlot' id='gui-powerSlot_6'>--</div>
					</div>
					<div id='gui-score'>0000</div>
					<div id='gui-credits'>0000</div>
					<div id='gui-ships'>0</div>
				</div>
			</div>
		</div>

		<!-- LOADING -->
		<div id="game_loading">
			Game loading...
		</div>
		
		<!-- MISSION LOBBY -->
		<div id="mission_lobby">
		</div>

		<!-- MISSION END -->
		<div id="mission_end">
		</div>

	</div>
   	<script>
		if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/) || 
			!navigator.userAgent.match(/(Chrome)/)	) 
		{	
			document.getElementById("sorrybody").style.display = "block";	
			document.getElementById("bodycontent").style.display = "none";
		}
	</script>

  </body>
</html>
